<!DOCTYPE html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>意见反馈</title>
	<link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
		<link rel="stylesheet" type="text/css" href="../../css/aui.css" />

    <style>
			html, body {width: 100%;min-height: 100%;background: #fff;}
			.h20 {height:0.5rem;background: #f0f0f0;}
.idea {
	  padding: 1rem 0;
}
      .idea h5 {
        font-size: 0.8rem;
        padding: 0 0.75rem;

      }
      .idea_box {
        overflow: hidden;
        padding: 0 0.75rem;
        margin: 1rem 0 1.5rem;
      }
      .idea_list {
        display: inline-block;
        width: 50%;
        float: left;
        color: #333;
        line-height: 1rem;
        font-size: 0.8rem;
      }
      .idea_list span {
        display: inline-block;
        width: 1rem;
        height: 1rem;
        margin-right: 0.5rem;
        border-radius: 50%;
        border: 2px solid #ccc;
        float: left;
      }
      .idea_list .active {
        border: 2px solid #2997e4 !important;
        background: url(../../image/1@3x.png) center center no-repeat #fff;
        background-size: 118%;
      }
      .idea_cont {
        padding: 0 0.75rem;
      }
      .idea_cont_header h5 {
        color: #999;
        font-size: 0.75rem;
        margin: 0.8rem 0;
      }
      .idea_phone input {
        padding: 0.7rem 0.75rem;
        margin: 0.75rem 0;
        font-size: 0.8rem;
        color: #333;
        border: 1px solid #f0f0f0;
      }
      .idea_cont_content textarea {
        border: 1px solid #f0f0f0;
        padding: 0.7rem 0.75rem;
        font-size: 0.8rem;
        color: #333;
        height: 6rem;
      }
      .submit {
        padding: 0 0.75rem;
				margin: 0;
        text-align: center;
        width: 100%;
      }
      .submit a {
        height: 2.5rem;
        line-height: 2.5rem;
        color: #fff;
        background-color: #2997e4;
        border-radius: 4px;
        width: 100%;
        font-size: 1rem;
        margin: 3rem 0 1.5rem;
      }

	    .aui-toast {
	      min-height: 1rem;
	    }
	    .aui-toast-content {
	      margin: 10px 0;
	      color: #fff;
				font-size: 0.8rem;
	    }
    </style>
</head>
<body>
<div id="app" v-cloak>
  <!-- 第一部分 -->
  <div class="idea">
    <h5>选择反馈类型</h5>
  </div>
  <div class="idea_box">
    <div class="idea_list" @click="type = 1">
      <span :class="{active: type == 1}"></span>产品建议
    </div>
    <div class="idea_list" @click="type = 2">
      <span :class="{active: type == 2}"></span>功能建议
    </div>
  </div>
  <div class="h20"></div>

  <!-- 第二部分 -->
  <div class="idea_cont">
    <div class="idea_cont_header">
      <h5>请输入您的反馈，我们将不断为您改进</h5>
    </div>
    <div class="idea_cont_content">
      <textarea name="" id=""  placeholder="希望产品..." v-model="content"></textarea>
    </div>
    <div class="idea_phone">
      <input type="text" placeholder="填写您的手机或邮箱" v-model="contact">
    </div>
  </div>
  <div class="h20"></div>

  <div class="submit">
    <a href="javascript:;" @click="Submit()">提交</a>
  </div>
</div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-toast.js" ></script>
<script src="../../script/zepto.js"></script>
<script type="text/javascript">



	apiready = function() {

	  var app = new Vue({
	    el: '#app',
	    data: {
	      type: 1,
		    content: '',
			  contact: '',
				token: '',
				toast: null
	    },
	    created: function() {
	      var $_this = this;
	      $_this.token = $api.getStorage('token') || '';
				if(!$api.getStorage('token')){
	        api.confirm( {
	            title: '是否登录',
	            msg: '确认是否登录？',
	            buttons: [ '确定', '取消' ]
	          }, function ( ret, err ) {
	            var index = ret.buttonIndex;
	            if ( index == 1 ) {
	              api.openWin({
	                name: 'login',
	                url: '../five_frame/login_header.html',
	                delay: 200,
	                bounces: false
	              });
	              return;
	            } else {
	              api.closeWin({
	                  name: name
	              });
	              return
	            }
	          })
	          return
	        }
				$_this.toast = new auiToast({})

	    },
	    methods: {
				Submit:function() {
		      var $_this = this;
					if($_this.content == ''){
						api.toast({ msg: '反馈意见不能为空',duration: 2000,location:'middle' });
						return;
					}
					api.ajax({
		       url: window.Url.addFeedBack,
		       method: 'POST',
					 headers: {
	             'baseParams':$_this.token,
							 'Content-Type': 'application/json'
					 },
					 data:{
						 body:{
							 type: $_this.type,
							 content: $_this.content,
							 contact: $_this.contact
						 }
					 },
		       timeout: 300,
		     }, function(ret, err) {
		         if (ret.code == 0) {
					     $_this.toast.custom({
					       title:"谢谢您的反馈",
					       html:'',
					       duration:2000
					     })
							 $_this.content = ''
							 $_this.contact = ''
		         } else {
		             api.alert({ msg: JSON.stringify(err) });
		         }
		     })
				}
	    }
	  })


		function goback () {
			api.closeWin({name:api.pageParam.name});
		}
	}

</script>
</html>
